<template>
<div style="z-index:7;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white">
    <div class="zhezhao"></div>
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goback">
    <div class="div1">
        <span>选择性别</span>
    </div>
    <div class="div2">
        <span v-show="boy==3">未选择性别</span>
        <span v-show="boy!=3">已选{{boy?'男生':'女生'}}</span>
        <span class="span1" :style="boy==3?'':(boy?'background-color: rgb(131, 218, 255);':'background-color: rgb(255, 154, 182);')" @click="changeSex()"></span>
        <!-- <span class="span1"></span> -->
        <span class="span2" :style="circle_position" @click="changeSex()"></span>
        <!-- <span class="span2" style="right:56px"></span> -->
    </div>

    <ImgBoy class="img_boy" :style="boy&&boy!=3?'opacity:1;z-index:1;height:210px;margin-left:37px;bottom:70px':'opacity:0;z-index:1;height:210px;margin-left:37px;bottom:70px'"></ImgBoy>
    <img src="./img/sex/img_boy.jpg" class="img_boy" :style="boy&&boy!=3?'opacity:1':'opacity:0'">
    <ImgBird class="img_bird" :style="boy&&boy!=3?'opacity:1':'opacity:0'"></ImgBird>
    <img src="./img/sex/img_girl.jpg" class="img_girl" :style="!boy?'opacity:1':'opacity:0'">
    <ImgCloud class="img_cloud" :style="!boy?'opacity:1':'opacity:0'"></ImgCloud>
    <ImgLantern class="img_lantern" :style="!boy?'opacity:1':'opacity:0'"></ImgLantern>
    <ImgDefault class="img_default" :style="boy==3?'opacity:1;bottom:120px;position: fixed;':'opacity:0;bottom:120px;position: fixed;'"></ImgDefault>
    
</div>
</template>

<script>
import ImgBoy from './img/sex/img_boy.vue'
import ImgBird from './img/sex/img_bird.vue'
import ImgCloud from './img/sex/img_cloud.vue'
import ImgLantern from './img/sex/img_lantern.vue'
import ImgDefault from './img/sex/img_default.vue'
export default {
    name:'chooseSex',
    components:{ImgBoy,ImgBird,ImgCloud,ImgLantern,ImgDefault},
    data(){
        return{
            boy:3,
            circle_position:''
        }
    },
    methods:{
        goback(){this.$router.replace({name:'infoshow'})},
        changeSex(){
            this.boy=!this.boy
        },
    },
    mounted(){
        setTimeout(() => {
            this.circle_position='right:43px'
            let num3 = -105
            let num4 = 20
            var id3 = setInterval(() => {
                if(num3 >= 20){
                    if(num4 <= 5){
                        clearInterval(id3)
                    }else{
                        this.circle_position='right:43px;margin-top:'+num4+'px'
                        num4-=1
                    }
                }else{
                    this.circle_position='right:43px;margin-top:'+num3+'px'
                    num3+=1.5
                }
            }, 1);
        }, 250);
        this.$addr.get(`user/get_by_uid`).then(
            response=>{
                console.log('获取用户数据请求成功',response.data);
                if(response.data.data.gender ==1 || response.data.data.gender ==0){
                    setTimeout(() => {
                        this.boy=response.data.data.gender
                        // console.log(this.boy,'&&&');
                    }, 800);
                }
            },error=>{
                // this.$message({
                //     message:'获取用户数据请求失败，请重新登陆',
                //     type:'error'
                // })
                console.log("获取用户数据请求失败",error.message);
                //this.$router.replace({name:'login'})
            }
        )
    },
    watch:{
        boy(value){
            this.$addr.get(`user/change_info?gender=${value?'1':'0'}`).then(
                response=>{
                    console.log('修改用户性别请求成功',response.data);
                },error=>{
                    this.$message({
                        message:'修改用户性别请求失败，请重新登陆',
                        type:'error'
                    })
                    console.log("修改用户性别请求失败",error.message);
                    //this.$router.replace({name:'login'})
                }
            )
            if(value){
                this.circle_position='right:56px'
                let num = 56
                var id = setInterval(() => {
                    if(num < 30){
                        clearInterval(id)
                    }else{
                        this.circle_position='right:'+num+'px'
                        num-=0.5
                    }
                }, 2);
            }else{
                this.circle_position='right:30px'
                let num2 = 30
                var id2 = setInterval(() => {
                    if(num2 > 56){
                        clearInterval(id2)
                    }else{
                        this.circle_position='right:'+num2+'px'
                        num2+=0.5
                    }
                }, 2);
            }
        }
    },
}
</script>

<style scoped>
.div1{
    background: linear-gradient(to right,rgb(255, 182, 238),rgb(255, 113, 236));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.img_back{
    position: fixed;
    margin-top: 28px;
    left: 14px;
    height: 18px;
}
.zhezhao{
    width: 100%;
    height: 100%;
    background-color: rgb(252, 245, 252);
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.div2{
    padding-top: 14px;
    padding-bottom: 14px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 15px;
    padding-right: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    margin-top: 10px;
    font-size: 17px;
    box-shadow: 0px 2px 4px 0.1px rgb(236, 236, 236);
}
.span1{
    position: fixed;
    right: 25px;
    padding: 27px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 15px;
    margin-top: -1px;
    background-color: rgb(222, 222, 222);
}
.span2{
    position: fixed;
    right: 30px;
    padding: 9px;
    border-radius: 14px;
    margin-top: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 12px -1px rgb(183, 183, 183);
    right: 43px;
    /* margin-top: -105px;
    margin-top: 20px; */
}
.img_girl{
    height: 260px;
    z-index: -1;
    bottom: 60px;
    position: fixed;
    user-select: none;
    margin-left: 100px;
    transition: opacity 1s ease-in-out;
}
.img_boy{
    height: 219px;
    z-index: -1;
    bottom: 93px;
    margin-left: 33px;
    position: fixed;
    user-select: none;
    transition: opacity 1s ease-in-out;
}
.img_bird{
    bottom: 240px;
    position: fixed;
    height: 80px;
    transition: opacity 1s ease-in-out;
}
.img_cloud{
    position: fixed;
    height: 250px;
    bottom: 30px;
    margin-left: -120px;
    transition: opacity 1s ease-in-out;
}
.img_lantern{
    position: fixed;
    height: 110px;
    margin-left: -15px;
    bottom: 220px;
    transition: opacity 1s ease-in-out;
}
</style>